<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员登录</title>
    <!-- 引入ElementUI的样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        #app-login{
            width: 100%;
            height: 100%;
        }
        .win-logoin {
            position: absolute;
            top: 0px;
            bottom: 0px;
            margin: 0px;
            left: 0px;
            right: 0px;
            padding: 0px;
            display: flex;
            /*设置弹性布局*/
            flex-direction: row;
            /*设置水平方向*/
            justify-content: center;
            /*根据direction的方向设置居中*/
            align-items: center;
            /*根据direction的反方向设置居中*/
        }

        .container {
            width: 800px;
            height: 500px;
            border-radius: 5px;
            box-shadow: 0px 0px 10px 5px black;
            display: flex;
            background-image: url("../images/back.jpg");
            /*设置弹性布局*/
            flex-direction: column;
            /*列布局*/
            align-items: center;
        }

        .title {
            font-size: 50px;
            font-weight: bold;
            color: red;
            text-shadow: 5px 5px 5px #a9a9a9;
            letter-spacing: 10px;
            margin: 50px 0;
        }

        .login-input {
            position: relative;
            width: 300px;
            height: 50px;
            border: 0px solid red;
            margin: 5px 0;
        }

        .login-input > label {
            box-sizing: border-box;
            position: absolute;
            border: 0px solid red;
            width: 65px;
            height: 50px;
            line-height: 50px;
            letter-spacing: 2px;
            padding-left: 10px;
            color: #666666;
        }

        .login-input > input {
            box-sizing: border-box;
            border-radius: 5px;
            border: 1px solid #dddddd;
            padding-left: 65px;
            outline: none;
            font-size: 18px;
            width: 100%;
            height: 100%;
        }

        .login-button {
            position: relative;
            width: 300px;
            height: 50px;
            margin: 15px 0;
        }

        .login-button > button {
            border: 0;
            width: 100%;
            height: 100%;
            border-radius: 5px;
            border: 1px solid #dddddd;
            outline: none;
            background-color: white;
            letter-spacing: 15px;
            padding-left: 15px;
            color: #666666;
            font-size: 18px;
        }

        .login-button > button:hover {
            cursor: pointer;
            background-color: cornflowerblue;
            color: white;
        }

        .login-button > button:active {
            font-weight: bold;
            outline: none;
            border: 0;
            box-shadow: 0px 0px 8px 1px #7088ff;
        }

    </style>

</head>
<body>
<div id="app-login">
    <div class="win-logoin" id="win-logoin-div">
        <div class="container" id="login-container">
            <div class="title">童趣玩具店-管理端</div>
            <div class="login-input">
                <label>账户：</label>
                <input type="text" v-model="user.username"/>
            </div>
            <div class="login-input">
                <label>密码：</label>
                <input type="password" v-model="user.password"/>
            </div>
            <div class="login-button">
                <button @click="login">登录</button>
            </div>
        </div>
    </div>
</div>

<script src="/toyshopping/js/vue.min.js"></script>
<script src="/toyshopping/js/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    /**
     * 创建Vue对象，并对vue进行配置
     * 在vue的构造器中配置
     * VMMV思想====>vue的核心思想,视图到模型，模型到视图的双向绑定
     * View
     * Model
     * Model
     * View
     */
    new Vue({
        //用于配置vue要渲染的元素,在el指定的元素中vue可以起作用,脱离指定元素，vue无效,vue的渲染元素可以为任意元素，一般是div
        el:'#app-login',
        data(){//vue的数据区，等同于java类中的属性
            return{
                user:{}, //管理员对象
            }
        },
        methods:{//vue的方法区,在方法区中定义方法，这些方法类似与java中的方法
            /**
             * 登录方法
             */
            login(){
                //显示加载条
                const loading = this.$loading({
                    lock: true,
                    text: '登录中,请稍后......',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                /**
                 * 使用ajax请求向服务端发送post请求
                 */
                axios.post('/toyshopping/manager/admin/login',this.user)
                    .then(response=>{//获得服务端回传的结果
                        //关闭加载条
                        loading.close();
                        let result = response.data;
                        if(result.success){//成功


                            //将用户的登录信息curUser存入到浏览器的sessionStorage中
                            //sessionStorage是以key=value的形式存储的字符串,它的作用域等同于session
                            let admin = result.data;
                            //JSON.stringify(obj):将obj对象序列化为一个JSON字符串
                            window.sessionStorage.setItem("admin",JSON.stringify(admin));


                            //使用ElementUI的弹框组件实现
                            this.$message({
                                message: result.message,
                                type: 'success',
                                duration:1000,//设置延迟关闭时间(毫秒)
                                onClose:()=>{//当弹框关闭后要执行的函数
                                    location.href="/toyshopping/manager/index.html";
                                }
                            });
                        }else{//失败
                            this.$message({
                                message: result.message,
                                type: 'error',
                                duration:1000//设置延迟关闭时间(毫秒)
                            });
                        }
                    })
                    .catch(err=>{
                        alert(err);
                    });
            }
        },
        created(){/*在页面加载后自动执行*/

        },
        mounted(){/*DOM结构在内存中构建前执行*/

        }
    });
</script>
</body>
</html>